<template>
  <div class="main-content">
    <div class="layout-breadcrumb">
      <Breadcrumb>
        <BreadcrumbItem href="#">广告</BreadcrumbItem>
        <BreadcrumbItem href="#">广告列表</BreadcrumbItem>
      </Breadcrumb>
    </div>
    <Card>
      <Row>
        <Col span="24">
        <span>广告计划名称：</span>
        <Input v-model="search.name" size="large" placeholder="请填写广告计划名称" style="width:200px;"></Input>
        <span style="margin-left:20px;">客户公司名称：</span>
        <Input v-model="search.company" size="large" placeholder="请填写公司名称" style="width:200px;"></Input>
        <span style="margin-left:20px;">审核状态：</span>
        <Select v-model="search.status" size="large" style="width:200px;">
          <Option value="0">全部广告</Option>
          <Option value="1">审核中</Option>
          <Option value="2">审核通过</Option>
          <Option value="3">审核拒绝</Option>
          <Option value="4">重新审核中</Option>
        </Select>
        <Button style="margin-left:20px;" type="primary" size="large" @click="goSearch">查询</Button>
        </Col>
      </Row>
    </Card>
    <Card style="margin-top:20px;">
      <div class="layout-content clearfix">
        <div class="layout-content-main">
          <div class="header">
            <Row type="flex" justify="center">
              <Col span="24">
                <div class="filter-wrapper" style="float:right;">
                  <Button size="large" :class="{'btn-active':curTime==='today'}" @click="changeTime('today')">今天</Button>
                  <Button size="large" :class="{'btn-active':curTime==='yesterday'}" @click="changeTime('yesterday')">昨天</Button>
                  <Button size="large" :class="{'btn-active':curTime==='7day'}" @click="changeTime('7day')">最近7天</Button>
                  <Button size="large" :class="{'btn-active':curTime==='30day'}" @click="changeTime('30day')">最近30天</Button>
                  <DatePicker type="daterange" :clearable="false" placement="bottom-end" placeholder="" style="width: 230px" size="large" @on-change="changeDate" v-model="search.time"></DatePicker>
                </div>
              </Col>
            </Row>
          </div>
          <Table stripe :columns="columns" :data="data"></Table>
          <div class="page-wrapper">
            <Page :current="page.current" :total="page.total" :page-size="page.size" :page-size-opts="page.opts" show-total @on-change="changeCur" @on-page-size-change="changeSize"></Page>
          </div>
        </div>
      </div>
    </Card>
  </div>
</template>

<script type="text/ecmascript-6">

export default {
  name: 'ad',
  data() {
    return {
      isShowDelModal: false,
      modal_loading: false,
      columns: [
        {
          title: '广告计划名称',
          key: 'name',
          align: 'center'
        },
        {
          title: '客户公司名称',
          key: 'org_name',
          align: 'center'
        },
        {
          title: '曝光量',
          key: 'count_view',
          sortable: true,
          align: 'center'
        },
        {
          title: '点击量',
          key: 'count_click',
          sortable: true,
          align: 'center'
        },
        {
          title: '点击率',
          key: 'click_percent',
          sortable: true,
          align: 'center'
        },
        {
          title: '点击价格',
          key: 'click_price',
          sortable: true,
          align: 'center'
        },
        {
          title: '消耗（元）',
          key: 'consume',
          sortable: true,
          align: 'center'
        },
        {
          title: '日预算（元/天）',
          key: 'day_budget',
          sortable: true,
          align: 'center'
        },
        {
          title: '状态',
          key: 'verify_status',
          align: 'center',
          render: (h, params) => {
            let verifyStatus = '';
            if (Number(params.row.verify_status) === 1) {
              verifyStatus = '审核中';
              return h('span', { style: { color: '#f90' } }, verifyStatus);
            }
            if (Number(params.row.verify_status) === 2) {
              verifyStatus = '审核通过';
              return h('span', { style: { color: '#19be6b' } }, verifyStatus);
            }
            if (Number(params.row.verify_status) === 3) {
              verifyStatus = '审核未通过';
              return h('span', { style: { color: '#ed3f14' } }, verifyStatus);
            }
            if (Number(params.row.verify_status) === 4) {
              verifyStatus = '重新审核中';
              return h('span', { style: { color: '#ed3f14' } }, verifyStatus);
            }
          }
        },
        {
          title: '操作',
          key: 'is_actived',
          width: 120,
          align: 'center',
          render: (h, params) => {
            if (params.row.verify_status === 1 || params.row.verify_status === 3 || params.row.verify_status === 4) {
              return h('div', [
                h('Poptip', {
                  props: { trigger: 'hover', content: '该计划尚未审核通过，或审核拒绝，请与工作人员联系！', placement: 'top-end' }
                }, [h('i-switch', {
                  props: { type: 'text', size: 'large', 'true-value': 1, 'false-value': 0, 'disabled': true }
                })
                  ])
              ]);
            } else if (params.row.verify_status === 2) {
              return h('i-switch', {
                props: { type: 'text', size: 'large', 'true-value': 1, 'false-value': 0, value: params.row.is_actived },
                on: {
                  'on-change': value => {
                    if (value === 1) {
                      this.openAD(params)
                    } else if (value === 0) {
                      this.closeAD(params)
                    }
                  }
                }
              },
                [h('span', { slot: 'open' }, '开启'), h('span', { slot: 'close' }, '关闭')]
              )
            }
          }
        }
      ],
      data: [],
      page: {
        current: 1,
        total: 100,
        size: 50,
        opts: [50]
      },
      search: {
        name: '',
        company: '',
        status: '0',
        time: null
      },
      curTime: 'today',
      moneydata: []
    };
  },
  mounted() {
    this.search.time = this.generateTime('today');
    this._loadData();
    this._loadData2();
  },
  methods: {
    _loadData() {
      let vm = this;
      let params = {
        type: 'get',
        url: 'ad',
        params: {
          page: vm.page.current,
          size: vm.page.size,
          name: vm.search.name,
          company: vm.search.company,
          status: vm.search.status,
          time: vm.search.time
        },
        sCallback(data) {
          vm.page.current = Number(data.data.current_page);
          vm.page.total = Number(data.data.total);
          vm.page.size = Number(data.data.per_page);
          vm.data = data.data.data;
        },
        eCallback(e) {
          console.log(e);
        }
      };
      this.http.request(params);
    },
    _loadData2() {
      let vm = this;
      let params = {
        type: 'get',
        url: 'finance/memberBalance',
        params: {
          page: vm.page.current,
          size: vm.page.size,
          company: vm.search.company
        },
        sCallback(data) {
          vm.moneydata = data.data.data;
        },
        eCallbakc(e) {
          console.log(e);
        }
      };
      this.http.request(params);
    },
    goSearch() {
      let time = this.search.time;
      if (time.length === 2) {
        let startTime =
          time[0].getFullYear() +
          '-' +
          (time[0].getMonth() + 1) +
          '-' +
          time[0].getDate();

        let endTime =
          time[1].getFullYear() +
          '-' +
          (time[1].getMonth() + 1) +
          '-' +
          time[1].getDate();
        this.search.time = startTime + ' - ' + endTime;
        this._loadData();
      } else {
        this.search.time = this.search.time;
        this._loadData();
      }
    },
    generateTime(index) {
      let date = new Date();
      let today = new Date();
      let yesterday = new Date();
      let day7 = new Date();
      let day30 = new Date();

      let result = null;

      today.setTime(date.getTime());
      yesterday.setTime(date.getTime() - 24 * 60 * 60 * 1000);
      day7.setTime(date.getTime() - 6 * 24 * 60 * 60 * 1000);
      day30.setTime(date.getTime() - 29 * 24 * 60 * 60 * 1000);

      switch (index) {
        case 'today':
          result =
            today.getFullYear() +
            '-' +
            (today.getMonth() + 1) +
            '-' +
            today.getDate() +
            ' - ' +
            today.getFullYear() +
            '-' +
            (today.getMonth() + 1) +
            '-' +
            today.getDate();
          break;
        case 'yesterday':
          result =
            yesterday.getFullYear() +
            '-' +
            (yesterday.getMonth() + 1) +
            '-' +
            yesterday.getDate() +
            ' - ' +
            yesterday.getFullYear() +
            '-' +
            (yesterday.getMonth() + 1) +
            '-' +
            yesterday.getDate();
          break;
        case '7day':
          result =
            day7.getFullYear() +
            '-' +
            (day7.getMonth() + 1) +
            '-' +
            day7.getDate() +
            ' - ' +
            today.getFullYear() +
            '-' +
            (today.getMonth() + 1) +
            '-' +
            today.getDate();
          break;
        case '30day':
          result =
            day30.getFullYear() +
            '-' +
            (day30.getMonth() + 1) +
            '-' +
            day30.getDate() +
            ' - ' +
            today.getFullYear() +
            '-' +
            (today.getMonth() + 1) +
            '-' +
            today.getDate();
          break;
        default:
          result =
            today.getFullYear() +
            '-' +
            (today.getMonth() + 1) +
            '-' +
            today.getDate() +
            ' - ' +
            today.getFullYear() +
            '-' +
            (today.getMonth() + 1) +
            '-' +
            today.getDate();
          break;
      }
      return result;
    },
    changeTime(index) {
      this.curTime = index;
      this.search.time = this.generateTime(index);
      this._loadData();
    },
    changeDate(index) {
      this.curTime = 'date';
      this.search.time = index[0] + ' - ' + index[1];
      this._loadData();
    },
    changeCur(current) {
      this.page.current = current;
      this._loadData();
    },
    changeSize(pageSize) {
      this.page.size = pageSize;
      this._loadData();
    },
    startAdStatus(id) {
      // let vm = this;
      let params = {
        type: 'post',
        url: 'ad/startStatus',
        params: {
          id: id
        },
        sCallback(data) {
          console.log('open')
        },
        eCallback(e) {
          console.log(e);
        }
      };
      this.http.request(params);
    },
    colsetAdStatus(id) {
      // let vm = this;
      let params = {
        type: 'post',
        url: 'ad/stopStatus',
        params: {
          id: id
        },
        sCallback(data) {
          console.log('close')
        },
        eCallback(e) {
          console.log(e);
        }
      };
      this.http.request(params);
    },
    openAD(params) {
      let vm = this;
      let vmparams = params;
      this.$Modal.confirm({
        title: '确认开启广告？',
        content: '根据点击单价，日预算，账户余额动态计算广告价格',
        onOk: () => {
          let moneydata;
          for (let i in vm.moneydata) {
            if (Number(vm.moneydata[i].user_id) === Number(vmparams.row.user_id)) {
              moneydata = vm.moneydata[i].amount;
            }
          }
          if (moneydata > Number(vmparams.row.click_price)) {
            this.startAdStatus(Number(vmparams.row.customer_ad_id));
          } else {
            this.goSearch()
            this.$Message.error('当前账户余额不足，无法开启广告!')
          }
        },
        onCancel: () => {
          this.goSearch()
        }
      })
    },
    closeAD(params) {
      this.$Modal.confirm({
        title: '确认广告？',
        content: '当前操作将会关闭广告，确定要关闭请点击确认按钮，如不关闭请点击取消按钮',
        onOk: () => {
          this.colsetAdStatus(Number(params.row.customer_ad_id));
        },
        onCancel: () => {
          this.goSearch()
        }
      })
    }
  }
};
</script>

<style lang="stylus">
.btn-active {
  color: #fff;
  background-color: #2d8cf0;
  border-color: #2d8cf0;
}

</style>


